<template>
  <div class="tollgate-card flex-col-center-start clickable"  >
    <el-card :body-style="{ padding: '0px' }"  shadow="hover">
      <div class="flex-col-center-start tollgate-card-body">
        <div style="position: relative">
          <el-icon :size="100">
            <component :is="tollgate.icon"></component>
          </el-icon>

<!--          面罩-->
          <div class="tollgate-card-mask flex-col-center" v-if="tollgate.progress === 0 || !tollgate.progress">
            <el-icon  :size="70"><Lock /></el-icon>
          </div>
        </div>

        <el-tooltip
            effect="light"
            :content="tollgate.tollgateName"
            placement="top"
        >
          <el-text class="tollgate-name" truncated>
            {{tollgate.tollgateName}}
          </el-text>
        </el-tooltip>
        <div class="flex-row-between width-100-percent" >
          <y-progress style="width:60%;height: 3px"
                      color="tomato"
                      :percent="computedProgressPercent">

          </y-progress>
          <div class="font-size-14">{{tollgate.progress*100 || 0}}%</div>
        </div>

      </div>

    </el-card>

  </div>
</template>

<script setup lang="ts">
import {computed, defineProps} from "vue"
import {Edit} from "@element-plus/icons";
import YProgress from "@/components/progress/YProgress.vue";

export interface TollgateCardType{
  id:number
  authorId:string
  tollgateName:string
  icon:string
  progress:number
}
let props=defineProps<{
  tollgate:TollgateCardType
}>()

let computedProgressPercent=computed(()=>{
  return props.tollgate.progress?props.tollgate.progress*100:0
})
</script>

<style scoped lang="less">
  .tollgate-card{
    .tollgate-card-body{
      position: relative;
      width: 100px;
      padding: 5px;
      .tollgate-name{
        width: 100%;
        height: 20px;
        font-size: 14px;
        //padding: 2px;
      }
      .tollgate-card-mask{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: #0c0c0c;
        color: #e3e3e3;
        backdrop-filter: blur(0.6);
        border-radius: 5px;
        z-index: 2;
      }
    }

  }
</style>